<template>
  <div class="message" :class="obj">{{ message }}</div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    message: {
      type: String,
      default: 'Hello',
    },
    type: {
      type: String,
      default: 'info',
    },
  },
  data() {
    return {
      obj: {
        'message-success': this.type === 'success',
        'message-info': this.type === 'info',
        'message-warning': this.type === 'warning',
        'message-danger': this.type === 'danger',
      },
    }
  },
}
</script>
<style>
.message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.message-success {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
.message-info {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
}
.message-warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}
.message-danger {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
</style>
